<template>
    <el-row>
        <el-col :span="4">
            <!-- log图标 -->
            <div class="logo">
                <img :src="logoUrl" alt="Logo" />
            </div>
        </el-col>
        <el-col :span="16"></el-col>
        <el-col :span="4" class="header-right">
            <!-- content -->
            <div class="header-content">
                <!-- element-plus 下拉菜单 -->
                <el-dropdown>
                    <span class="el-dropdown-link">
                        <el-avatar :size="30" :src="getImgUrl('user')" />
                    </span>
                    <template #dropdown>
                        <el-dropdown-menu>
                            <el-dropdown-item>个人中心</el-dropdown-item>
                            <el-dropdown-item>退出</el-dropdown-item>
                        </el-dropdown-menu>
                    </template>
                </el-dropdown>
            </div>
        </el-col>
    </el-row>
</template>

<script setup>
const logoUrl = ''
// 用于动态引入图片的路径
const getImgUrl = (user) => {
    // 第一个参数：绝对路径/相对路径
    // 第二个参数：base基准路径 当一个参数是相对路径时生效（默认undefined）
    return new URL(`../assets/images/72.png`, import.meta.url).href
}
</script>

<style scoped>
.logo {
    display: flex;
    align-items: center;
    /* 垂直居中 */
    height: 100%;
    /* 确保 logo 垂直居中 */
}

.logo img {
    max-height: 60px;
    /* 控制 logo 图片的最大高度 */
    object-fit: contain;
    /* 确保图片按比例缩放 */
}

.header-right {
    display: flex;
    justify-content: flex-end;
    /* 右对齐 */
    align-items: center;
    /* 垂直居中 */
}

.header-content {
    display: flex;
    align-items: center;
    /* 垂直居中 */
}
</style>